<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>employee_list</title>
</head>
<body>
<script th:src="@{/static/js/vue.js}"></script>
<table id="dataTable" border="1" cellspacing="0" align="center">
    <tr>
        <th colspan="5">Employee Info</th>
    </tr>
    <tr>
        <th>id</th>
        <th>lastName</th>
        <th>email</th>
        <th>gender</th>
        <th>options(<a th:href="@{/toAdd}">ADD</a>)</th>
    </tr>
    <tr th:each="employee : ${employeeCollection}">
        <td th:text="${employee.id}"></td>
        <td th:text="${employee.lastName}"></td>
        <td th:text="${employee.email}"></td>
        <td th:text="${employee.gender}"></td>
        <td>
            <a @click="deleteEmployee" th:href="@{/employee/}+${employee.id}">delete</a>
            <a th:href="@{/employee/}+${employee.id}">update</a>
        </td>
    </tr>
</table>
<!-- 作用：通过超链接控制表单的提交，将post请求转换为delete请求 -->
<form id="deleteForm" method="post">
    <!-- HiddenHttpMethodFilter要求：必须传输_method请求参数，并且值为最终的请求方式 -->
    <input type="hidden" name="_method" value="delete"/>
</form>
<script>
    var vue=new Vue({
        el : "#dataTable",
        methods : {
            deleteEmployee:function(event) {
                let deleteForm = document.getElementById("deleteForm")
                deleteForm.action=event.target.href
                deleteForm.submit()  // 提交表单
                event.preventDefault()  // 取消超链接的默认行为
            }
        }
    })
</script>
</body>
</html>